<template>
  <div>
    <el-input
      v-model="filterText"
      placeholder="输入关键字进行过滤"/>
    <el-tree
      ref="tree"
      :data="data"
      :props="defaultProps"
      :default-expand-all="true"
      :filter-node-method="filterNode"
    />
  </div>
</template>
<script>
import subjectApi from '@/api/subject'
export default {
  data() {
    return {
      filterText: '',
      data: [],
      defaultProps: {
        children: 'children',
        label: 'title' // label表示要展示的菜单标题的 属性名
      }
    }
  },
  watch: {// 监听
    filterText(val) {
      this.$refs.tree.filter(val) // 调用tree标签的过滤方法
    }
  },
  created() {
    this.getNestedSubjects()
  },
  methods: {
    filterNode(val, data) { // val 代表改变后的filterText的值， data代表每个节点的json对象
      if (!val) { // val 没有值 data 节点正常显示
        return true
      }
      // 如果data数据中显示的标题 包含val的值 则显示
      // .toUpperCase():过滤时不区分大小写
      return data.title.toUpperCase().indexOf(val.toUpperCase()) !== -1
    },
    getNestedSubjects() {
      subjectApi.getNestedSubjects().then(r => {
        this.data = r.data.items
      })
    }
  }
}
</script>
